import { fabric } from './FabricImports'
import verticalImg from '@/assets/editor/middlecontrol.svg'
import horizontalImg from '@/assets/editor/middlecontrolhoz.svg'
import edgeImg from '@/assets/editor/edgecontrol.svg'
import rotateImg from '@/assets/editor/rotateicon.svg'

/**
 * 实际场景: 在进行某个对象缩放的时候，由于fabricjs默认精度使用的是toFixed(2)。
 * 此处为了缩放的精度更准确一些，因此将NUM_FRACTION_DIGITS默认值改为4，即toFixed(4).
 */
fabric.Object.NUM_FRACTION_DIGITS = 4

function drawImg(
    ctx: CanvasRenderingContext2D,
    left: number,
    top: number,
    img: HTMLImageElement,
    wSize: number,
    hSize: number,
    angle: number | undefined
) {
    if (angle === undefined) return
    ctx.save()
    ctx.translate(left, top)
    ctx.rotate(fabric.util.degreesToRadians(angle))
    ctx.drawImage(img, -wSize / 2, -hSize / 2, wSize, hSize)
    ctx.restore()
}

// 中间横杠
function intervalControl() {
    const verticalImgIcon = document.createElement('img')
    verticalImgIcon.src = verticalImg

    const horizontalImgIcon = document.createElement('img')
    horizontalImgIcon.src = horizontalImg

    function renderIcon(
        ctx: CanvasRenderingContext2D,
        left: number,
        top: number,
        styleOverride: any,
        fabricObject: fabric.Object
    ) {
        drawImg(ctx, left, top, verticalImgIcon, 20, 25, fabricObject.angle)
    }

    function renderIconHoz(
        ctx: CanvasRenderingContext2D,
        left: number,
        top: number,
        styleOverride: any,
        fabricObject: fabric.Object
    ) {
        drawImg(ctx, left, top, horizontalImgIcon, 25, 20, fabricObject.angle)
    }
    // 中间横杠
    fabric.Object.prototype.controls.ml = new fabric.Control({
        x: -0.5,
        y: 0,
        offsetX: -1,
        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
        render: renderIcon
    })

    fabric.Object.prototype.controls.mr = new fabric.Control({
        x: 0.5,
        y: 0,
        offsetX: 1,
        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
        render: renderIcon
    })

    fabric.Object.prototype.controls.mb = new fabric.Control({
        x: 0,
        y: 0.5,
        offsetY: 1,
        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
        render: renderIconHoz
    })

    fabric.Object.prototype.controls.mt = new fabric.Control({
        x: 0,
        y: -0.5,
        offsetY: -1,
        cursorStyleHandler: fabric.controlsUtils.scaleSkewCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
        getActionName: fabric.controlsUtils.scaleOrSkewActionName,
        render: renderIconHoz
    })
}

// 顶点
function peakControl() {
    const img = document.createElement('img')
    img.src = edgeImg

    function renderIconEdge(
        ctx: CanvasRenderingContext2D,
        left: number,
        top: number,
        styleOverride: any,
        fabricObject: fabric.Object
    ) {
        drawImg(ctx, left, top, img, 25, 25, fabricObject.angle)
    }
    // 四角图标
    fabric.Object.prototype.controls.tl = new fabric.Control({
        x: -0.5,
        y: -0.5,
        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingEqually,
        render: renderIconEdge
    })
    fabric.Object.prototype.controls.bl = new fabric.Control({
        x: -0.5,
        y: 0.5,
        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingEqually,
        render: renderIconEdge
    })
    fabric.Object.prototype.controls.tr = new fabric.Control({
        x: 0.5,
        y: -0.5,
        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingEqually,
        render: renderIconEdge
    })
    fabric.Object.prototype.controls.br = new fabric.Control({
        x: 0.5,
        y: 0.5,
        cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
        actionHandler: fabric.controlsUtils.scalingEqually,
        render: renderIconEdge
    })
}

// 旋转
function rotationControl() {
    const img = document.createElement('img')
    img.src = rotateImg
    function renderIconRotate(
        ctx: CanvasRenderingContext2D,
        left: number,
        top: number,
        styleOverride: any,
        fabricObject: fabric.Object
    ) {
        drawImg(ctx, left, top, img, 40, 40, fabricObject.angle)
    }
    // 旋转图标
    fabric.Object.prototype.controls.mtr = new fabric.Control({
        x: 0,
        y: 0.5,
        cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
        actionHandler: fabric.controlsUtils.rotationWithSnapping,
        offsetY: 30,
        // withConnecton: false,
        actionName: 'rotate',
        render: renderIconRotate
    })
}

class ControlsPlugin {
    constructor() {
        this.init()
    }
    init() {
        // 顶点图标
        peakControl()
        // 中间横杠图标
        intervalControl()
        // 旋转图标
        rotationControl()

        // 选中样式
        fabric.Object.prototype.set({
            transparentCorners: false,
            borderColor: '#51B9F9',
            cornerColor: '#FFF',
            borderScaleFactor: 2.5,
            cornerStyle: 'circle',
            cornerStrokeColor: '#0E98FC',
            borderOpacityWhenMoving: 1
        })
        // textbox保持一致
        fabric.Textbox.prototype.controls = fabric.Object.prototype.controls
    }

    destroy() {
        console.log('pluginDestroy')
    }
}

export default ControlsPlugin
